<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>用户反馈</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <script src="/lobsteruiframe/ueditor/ueditor.config.js"></script>
    <script src="/lobsteruiframe/ueditor/ueditor.all.js"></script>
    <style>
        .layui-form-label1 {
        padding: 10px 0px;
        word-wrap: break-word;
        word-break: break-all;
        width: 200px;
        /*padding-top: 5px;*/
    }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layui-form layuiadmin-card-header-auto">
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">医疗机构：</label>
                        <div class="layui-input-block">
                            <select name="workId" id="workId" lay-filter="workId"></select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">反馈来源：</label>
                        <div class="layui-input-block">
                            <select id="sourceType" name="sourceType" lay-search="" lay-filter="sourceType">
                                <option value="0">全部</option>
                                <option value="2">患者小程序</option>
                                <option value="1">医生小程序</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-block">
                            <select id="cmbStatus" name="cmbStatus" lay-search="">
                                <option value="0">全部</option>
                                <option value="2">未处理</option>
                                <option value="1">已处理</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">

                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-feedback-submit"
                            id="btnSearch">
                            <i class="layui-icon layuiadmin-button-btn layui-icon-search"></i>查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="LAY-consult-feedback" lay-filter="LAY-consult-feedback"></table>
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table'], {
        data: {
            $layui: null,
            right: null,
            tablefeed: null,
        },
        pageload: function (right) {
            this.data.right = right;
            this.loadselectworker(() => {
                this.dataLoad();
            });

            this.initevent();
        },
        initevent() {
            var self = this;

            //查询按钮事件
            layui.form.on('submit(LAY-feedback-submit)', function (data) {
                self.data.tablefeed.reload({
                    where: {
                        workId: $('#workId').val(),
                        status: $("#cmbStatus").find("option:selected").val(),
                        sourceType: $("#sourceType").find("option:selected").val()
                    },
                    page: {
                        curr: 1
                    }
                })
            });
            //监听行工具栏事件（编辑、启停用）
            layui.table.on('tool(LAY-consult-feedback)', function (obj) {
                var data = obj.data;//当前行数据
                var tr = obj.tr;
                var layEvent = obj.event;//获得lay-event的值
                //var feedbackid = data.FeedBackId;
                // window.feedbackinfo = data
                switch (layEvent) {
                    case 'setflag':
                        layer.open({
                            type: 1
                            , title: '反馈回复'
                            , content: $('#dlg_answer').html()
                            , area: ['85%', '85%']
                            , btn: ['保存', '取消']
                            , resize: false
                            , success: function (layero, index) {
                                window.answerform.init(data);
                            }
                            , yes: function (index, layero) {
                                var submit = $('#btnSubmit');
                                //获取排班医生集合
                                var answer = $("#answer").val();
                                if (!answer) {
                                    layer.msg("请输入反馈回复信息！");
                                    return;
                                }

                                //监听提交
                                layui.form.on("submit(btnSubmit)", function (formdata) {
                                    var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });

                                    lobsterlayui.GET('/admin/v1/worker/FlagFeedBack', { feedBackId: data.FeedBackId, answer: answer }).then(retdata => {
                                        layer.close(load);
                                        layer.close(index);
                                        layer.msg("保存成功");
                                        self.data.tablefeed.reload(); //数据刷新
                                    })
                                });

                                submit.trigger("click");

                            }
                        });

                        break;
                }
            });
        },
        loadselectworker(callback) {
            //获取机构数据
            lobsterlayui.GET('/admin/v1/worker/GetSelectWorkerData').then(data => {
                //医疗机构
                var workers = data["Workers"];
                $("#workId").html("");
                $.each(workers, function (i, item) {
                    $("#workId").append("<option value=\"" + item.WorkId + "\">" + item.WorkName + "</option>");
                });

                $('#workId').val(workers[0].WorkId);//默认选择当前登录机构
                //重新渲染
                layui.form.render("select");

                if (callback) {
                    callback();
                }
            })

            layui.form.on('select(workId)', function (data) {
                if (callback) {
                    callback();
                }
            });
        },
        dataLoad: function () {
            var self = this;
            //表格渲染
            self.data.tablefeed = layui.table.render({
                elem: '#LAY-consult-feedback',
                headers: lobsterlayui.GetHeaderData()
                , where: {
                    workId: $('#workId').val(),
                    status: $("#cmbStatus").find("option:selected").val(),
                    sourceType: $("#sourceType").find("option:selected").val()
                }
                , height: 'full-130'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度
                , url: "/admin/v1/worker/GetFeedBackList" //数据接口
                , page: true //开启分页
                , even: true
                , cols: [[ //表头
                    { field: 'FeedBackId', title: '编号', align: 'center', width: '7%', sort: true }
                    , { field: 'FunctionTypeN', title: '功能', width: '8%' }
                    , { field: 'FeedBackDesc', title: '描述', align: 'left', width: '14%' }
                    , { field: 'MPUserId', title: '反馈账号', align: 'center', width: '10%' }
                    , { field: 'SourceTypeN', title: '反馈来源', width: '10%' }
                    , { field: 'FeedBackDate', title: '反馈时间', width: '15%', sort: true, templet: '#feedbackTimeTpl' }
                    , { field: 'StatusName', title: '状态', width: '7%', align: 'center', sort: true, templet: '#flagTpl' }
                    , { field: 'OperateDate', title: '处理时间', width: '15%', sort: true, templet: '#optimeTpl' }
                    , { title: '操作', width: '14%', fixed: 'right', toolbar: '#bar', align: 'center' }
                ]], done: function (res) {
                    var list = res.data;
                },
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.data
                    }
                }
            });
        },
    })

    window.answerform = {
        //数据初始化
        init: function (data) {
            var self = this;
            lobsterlayui.GET('/admin/v1/worker/GetFeedBackDetail', { feedBackId: data.FeedBackId, workId: $('#workId').val() }).then(retdata => {
                //详细信息
                var feedbackInfo = retdata.detail;
                var imglist = retdata.imglist;

                this.TempInit(feedbackInfo, imglist);
            })
        },
        //模板初始化
        TempInit: function (feedbackInfo, imglist) {
            var self = this;
            var getTp = $('#infoTem').html();
            var view = document.getElementById('infoHtml');
            layui.laytpl(getTp).render({ info: feedbackInfo, list: imglist }, function (html) {
                view.innerHTML = html;
            });
            layui.form.render();
            layui.element.init();
        },
    }
</script>

<script type="text/html" id="flagTpl">
    {{#  if(d.Status == 0){ }}
    <span style="color:red;">{{ d.StatusName }}</span>
    {{#  } else { }}
    {{ d.StatusName }}
    {{#  } }}
</script>
<script type="text/html" id="feedbackTimeTpl">
    {{ layui.util.toDateString(new Date(d.FeedBackDate).getTime(), 'yyyy-MM-dd HH:mm:ss') }}
</script>
<script type="text/html" id="optimeTpl">
    {{#  if(d.OperateDate==null||layui.util.toDateString(new Date(d.OperateDate).getTime(), 'yyyy-MM-dd') == '1900-01-01'){ }}
    <span></span>
    {{#  } else { }}
    {{ layui.util.toDateString(new Date(d.OperateDate).getTime(), 'yyyy-MM-dd HH:mm:ss') }}
    {{#  } }}
</script>
<script type="text/html" id="bar">
    {{#  if(d.Status == 1){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setflag"><i class="layui-icon layui-extend-stop"></i>修改</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setflag"><i class="layui-icon layui-icon-ok"></i>处理</a>
    {{#  } }}
</script>

<script type="text/html" id="dlg_answer">
    <div class="layui-fluid" id="infoHtml"></div>
        
</script>
<script type="text/html" id="infoTem">
    <form class="layui-form">
    <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px"><i style="color:red;">*&ensp; </i>反馈时间：</label>
            <div class="layui-input-block">
                <label class="layui-form-label1 ">{{ layui.util.toDateString(new Date(d.info.FeedBackDate).getTime(), 'yyyy-MM-dd HH:mm:ss') }}</label>
            </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><i style="color:red;">*&ensp; </i>反馈内容：</label>
        <div class="layui-input-block" style="width: 75%;">
            <label class="layui-form-label1 ">{{d.info.FeedBackDesc }}</label>
        </div>
    </div>
    {{# if(d.list.length>0){ }}
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><i style="color:red;">*&ensp; </i>上传截图：</label>
        <div class="layui-input-block" style="    padding-top: 12px;">
            {{# layui.each(d.list, function(index, item){}}
            <a href='{{item.src||""}}' target="_blank">
                <img class="layui-nav-img1" src="{{item.src}}" href />
            </a>
            {{# })}}
        </div>
    </div>
    {{#  } }}
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><i style="color:red;">*&ensp; </i>反馈回复：</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="answer" rows="7" lay-verify="required" maxlength="200" name="answer">{{d.info.FeedBackAnswer||""}}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
        <input type="reset" id="LAY-form-reset" value="重置">
    </div>
</form>
</script>